React useFormState -validointiputki: Monivaiheisen lomakevalidoinnin hallinta

Monimutkaisten lomakkeiden rakentaminen vankalla validoinnilla on yleinen haaste nykyaikaisessa verkkokehityksessä. Reactin useFormState-hook tarjoaa tehokkaan ja joustavan tavan hallita lomakkeen tilaa ja validointia, mikä mahdollistaa kehittyneiden monivaiheisten validointiputkien luomisen. Tämä kattava opas johdattaa sinut prosessin läpi, perusteiden ymmärtämisestä edistyneiden asynkronisten validointistrategioiden toteuttamiseen.

Miksi monivaiheinen lomakevalidointi?

Perinteinen, yksivaiheinen lomakevalidointi voi muuttua hankalaksi ja tehottomaksi, erityisesti silloin, kun käsitellään lomakkeita, jotka sisältävät lukuisia kenttiä tai monimutkaisia riippuvuuksia. Monivaiheinen validointi mahdollistaa seuraavat asiat:

• Paranna käyttökokemusta: Tarjoa välitöntä palautetta tietyistä lomakkeen osioista ja ohjaa käyttäjiä suorittamaan prosessin tehokkaammin.
• Paranna suorituskykyä: Vältä tarpeettomia validointitarkistuksia koko lomakkeelle, optimoi suorituskykyä, erityisesti suurissa lomakkeissa.
• Lisää koodin ylläpidettävyyttä: Jaa validointilogiikka pienempiin, hallittavampiin yksiköihin, mikä helpottaa koodin ymmärtämistä, testaamista ja ylläpitoa.

useFormState-ymmärtäminen

useFormState-hook (usein saatavilla kirjastoissa, kuten react-use tai mukautetuissa toteutuksissa) tarjoaa tavan hallita lomakkeen tilaa, validointivirheitä ja lähetyksen käsittelyä. Sen ydintoiminnot sisältävät:

• Tilan hallinta: Tallentaa lomakekenttien nykyiset arvot.
• Validointi: Suorittaa validointisääntöjä lomakkeen arvoille.
• Virheiden seuranta: Seuraa kuhunkin kenttään liittyviä validointivirheitä.
• Lähetyksen käsittely: Tarjoaa mekanismeja lomakkeen lähettämiseen ja lähetyksen tuloksen käsittelyyn.

Perusvalidointiputken rakentaminen

Aloitetaan yksinkertaisella esimerkillä kaksivaiheisesta lomakkeesta: henkilötiedot (nimi, sähköposti) ja osoitetiedot (katuosoite, kaupunki, maa).

Vaihe 1: Määritä lomakkeen tila

Määritämme ensin lomakkeen alkutilan, joka kattaa kaikki kentät:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Vaihe 2: Luo validointisäännöt

Seuraavaksi määritämme validointisääntömme. Vaaditaan tässä esimerkissä, että kaikki kentät ovat ei-tyhjiä ja varmistetaan, että sähköposti on kelvollisessa muodossa.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Tämä kenttä on pakollinen.';
  }

  if (fieldName === 'email' && !/^\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/.test(value)) {
    return 'Virheellinen sähköpostimuoto.';
  }

  return null; // Ei virhettä
};

Vaihe 3: Toteuta useFormState-hook

Integroidaan nyt validointisäännöt React-komponenttiimme käyttämällä (hypoteettista) useFormState-hookia:

import React, { useState } from 'react';

// Oletetaan mukautettu toteutus tai kirjasto, kuten react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Validoi muutoksen yhteydessä paremman UX:n saavuttamiseksi (valinnainen)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); // Yhdistä olemassa oleviin virheisiin
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Lähetä lomake
      console.log('Lomake lähetetty:', values);
      alert('Lomake lähetetty!'); // Korvaa todellisella lähetyslogiikalla
    } else {
      console.log('Lomakkeessa on virheitä, korjaa ne.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Henkilötiedot
          
            Etunimi:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Sukunimi:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            Sähköposti:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Osoitetiedot
          
            Katuosoite:
            
            {errors.street && {errors.street}}
          
          

          
            Kaupunki:
            
            {errors.city && {errors.city}}
          
          

          
            Maa:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Edellinen}
        {currentStage < 2 && Seuraava}
        {currentStage === 2 && Lähetä}
      
    
  );
};

export default MyForm;

Vaihe 4: Toteuta vaiheiden navigointi

Hallitse lomakkeen nykyistä vaihetta tilamuuttujilla ja renderöi sopiva lomakkeen osa nykyisen vaiheen perusteella.

Edistyneet validointitekniikat

Asynkroninen validointi

Joskus validointi edellyttää vuorovaikutusta palvelimen kanssa, kuten tarkistamista, onko käyttäjätunnus saatavilla. Tämä edellyttää asynkronista validointia. Näin voit integroida sen:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Käyttäjätunnus on saatavilla
    } else {
      return 'Käyttäjätunnus on jo käytössä.';
    }
  } catch (error) {
    console.error('Virhe tarkistettaessa käyttäjätunnusta:', error);
    return 'Virhe tarkistettaessa käyttäjätunnusta. Yritä uudelleen.'; // Käsittele verkkovirheitä sujuvasti
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Lähetä lomake
        console.log('Lomake lähetetty:', values);
        alert('Lomake lähetetty!'); // Korvaa todellisella lähetyslogiikalla
      } else {
        console.log('Lomakkeessa on virheitä, korjaa ne.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Valinnainen: näytä latausviesti validoinnin aikana
  };
};

Tämä esimerkki sisältää validateUsername-funktion, joka tekee API-kutsun käyttäjätunnuksen saatavuuden tarkistamiseksi. Varmista, että käsittelet mahdolliset verkkovirheet ja annat käyttäjälle asianmukaista palautetta.

Ehdollinen validointi

Jotkin kentät saattavat vaatia validointia vain muiden kenttien arvon perusteella. Esimerkiksi "Yrityksen verkkosivusto" -kenttä voidaan vaatia vain, jos käyttäjä ilmoittaa olevansa työssä. Toteuta ehdollinen validointi validointifunktioissasi:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Yrityksen verkkosivusto on pakollinen, jos olet työssä.';
  }
  return validateField(fieldName, value); // Delegoi perusvalidointiin
};

Dynaamiset validointisäännöt

Joskus validointisääntöjen itsensä on oltava dynaamisia ulkoisten tekijöiden tai tietojen perusteella. Voit saavuttaa tämän siirtämällä dynaamiset validointisäännöt argumentteina validointifunktioillesi:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Tämän kentän on oltava alle ${rules[fieldName].maxLength} merkkiä.`;
  }
  return validateField(fieldName, value); // Delegoi perusvalidointiin
};

Virheiden käsittely ja käyttökokemus

Tehokas virheiden käsittely on ratkaisevan tärkeää positiivisen käyttökokemuksen kannalta. Harkitse seuraavia asioita:

• Näytä virheet selkeästi: Aseta virheilmoitukset vastaavien syöttökenttien lähelle. Käytä selkeää ja ytimekästä kieltä.
• Reaaliaikainen validointi: Validoi kentät käyttäjän kirjoittaessa, ja anna välitöntä palautetta. Huomioi suorituskykyvaikutukset; poista tai kurista validointikutsuja tarvittaessa.
• Keskity virheisiin: Kohdista lähetyksen jälkeen käyttäjän huomio ensimmäiseen kenttään, jossa on virhe.
• Saavutettavuus: Varmista, että virheilmoitukset ovat vammaisten käyttäjien saatavilla käyttämällä ARIA-attribuutteja ja semanttista HTML:ää.
• Kansainvälistyminen (i18n): Toteuta asianmukainen kansainvälistyminen virheilmoitusten näyttämiseksi käyttäjän haluamalla kielellä. Palvelut, kuten i18next tai natiivi JavaScript Intl API, voivat auttaa.

Parhaat käytännöt monivaiheiseen lomakevalidointiin

• Pidä validointisäännöt ytimekkäinä: Jaa monimutkainen validointilogiikka pienempiin, uudelleenkäytettäviin funktioihin.
• Testaa perusteellisesti: Kirjoita yksikkötestejä varmistaaksesi validointisääntöjesi tarkkuuden ja luotettavuuden.
• Käytä validointikirjastoa: Harkitse omistetun validointikirjaston (esim. Yup, Zod) käyttöä prosessin yksinkertaistamiseksi ja koodin laadun parantamiseksi. Nämä kirjastot tarjoavat usein skeemapohjaisen validoinnin, mikä helpottaa monimutkaisten validointisääntöjen määrittämistä ja hallintaa.
• Optimoi suorituskyky: Vältä tarpeettomia validointitarkistuksia, erityisesti reaaliaikaisen validoinnin aikana. Käytä muistamisen tekniikoita validointitulosten välimuistiin tallentamiseksi.
• Anna selkeät ohjeet: Ohjaa käyttäjiä lomakkeen täyttöprosessin läpi selkeillä ohjeilla ja hyödyllisillä vinkeillä.
• Harkitse progressiivista julkistamista: Näytä vain kunkin vaiheen kannalta olennaiset kentät, mikä yksinkertaistaa lomaketta ja vähentää kognitiivista kuormitusta.

Vaihtoehtoiset kirjastot ja lähestymistavat

Vaikka tämä opas keskittyy mukautettuun useFormState-hookiin, on olemassa useita erinomaisia lomakekirjastoja, jotka tarjoavat samanlaisia toimintoja, usein lisäominaisuuksilla ja suorituskyvyn optimoinneilla. Joitakin suosittuja vaihtoehtoja ovat:

• Formik: Laajalti käytetty kirjasto lomakkeen tilan ja validoinnin hallintaan Reactissa. Se tarjoaa deklaratiivisen lähestymistavan lomakkeiden käsittelyyn ja tukee erilaisia validointistrategioita.
• React Hook Form: Suorituskykyyn keskittynyt kirjasto, joka hyödyntää valvomattomia komponentteja ja Reactin ref API:a minimoimaan uudelleenrenderöinnit. Se tarjoaa erinomaisen suorituskyvyn suurille ja monimutkaisille lomakkeille.
• Final Form: Monipuolinen kirjasto, joka tukee erilaisia UI-kehyksiä ja validointikirjastoja. Se tarjoaa joustavan ja laajennettavan API:n lomakkeen käyttäytymisen mukauttamiseen.

Oikean kirjaston valinta riippuu erityisvaatimuksistasi ja -mieltymyksistäsi. Harkitse tekijöitä, kuten suorituskykyä, helppokäyttöisyyttä ja ominaisuuksien määrää tehdessäsi päätöstä.

Kansainväliset näkökohdat

Kun rakennat lomakkeita maailmanlaajuiselle yleisölle, on tärkeää ottaa huomioon kansainvälistyminen ja lokalisointi. Tässä on joitain keskeisiä näkökohtia:

• Päivämäärä- ja aikamuodot: Käytä paikallisia päivämäärä- ja aikamuotoja varmistaaksesi johdonmukaisuuden ja välttääksesi sekaannusta.
• Numeromuodot: Käytä paikallisia numeromuotoja, mukaan lukien valuuttasymbolit ja desimaalierottimet.
• Osoitemuodot: Mukauta osoitekentät eri maiden muotoihin. Jotkin maat saattavat vaatia postinumeroita ennen kaupunkeja, kun taas toisissa ei välttämättä ole postinumeroita ollenkaan.
• Puhelinnumeron validointi: Käytä puhelinnumeron validointikirjastoa, joka tukee kansainvälisiä puhelinnumeromuotoja.
• Merkistökoodaus: Varmista, että lomakkeesi käsittelee eri merkistöjä oikein, mukaan lukien Unicode ja muut ei-latinalaiset merkit.
• Oikealta vasemmalle (RTL) -asettelu: Tue RTL-kieliä, kuten arabiaa ja hepreaa, mukauttamalla lomakkeen asettelua vastaavasti.

Harkitsemalla näitä kansainvälisiä näkökohtia voit luoda lomakkeita, jotka ovat saavutettavissa ja käyttäjäystävällisiä maailmanlaajuiselle yleisölle.

Johtopäätös

Monivaiheisen lomakevalidointiputken toteuttaminen Reactin useFormState-hookin (tai vaihtoehtoisten kirjastojen) avulla voi parantaa merkittävästi käyttökokemusta, tehostaa suorituskykyä ja lisätä koodin ylläpidettävyyttä. Ymmärtämällä ydinkäsitteet ja soveltamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit rakentaa vankkoja ja skaalautuvia lomakkeita, jotka vastaavat nykyaikaisten verkkosovellusten vaatimuksiin.

Muista priorisoida käyttökokemus, testata perusteellisesti ja mukauttaa validointistrategiasi projektisi erityisvaatimusten mukaan. Huolellisella suunnittelulla ja toteutuksella voit luoda lomakkeita, jotka ovat sekä toimivia että nautinnollisia käyttää.

Lisätietoja

• Reactin virallinen dokumentaatio
• Formikin dokumentaatio
• React Hook Form -dokumentaatio